<template>
  <div class="bigest">
    <!-- diyi -->
    <div class="controlsvideo">
      <video
        class="videovideo"
        src="@/assets/video/中国经典纹样图鉴3.mp4"
        controls
      ></video>
    </div>
    <div class="bottombottom">
      <div class="tubiao" @click="open">查看结果</div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      
    }
  },
  methods: {
    open() {
      this.$router.push("/dier");
    },
  }
};
</script>

<style lang="scss" scoped>
.bigest {
  width: 100vw;
  height: 100vh;
  background-image: url(@/assets/images/shipinjiemian.jpg);
  background-size: 100% 100%;
  position: relative;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  .controlsvideo {
    position: absolute;
    top: 8.5vh;
    display: flex;
    justify-content: center;
    align-items: center;
    // background-color: antiquewhite;
    height: 75vh;
    width: 100%;
    .videovideo {
      width: 75%;
      height: 100%;
      border-radius: 30px;
    object-fit: fill;

    }
  }
  .bottombottom{
    width: 100%;
    height: 6vh;
    // background-color: #fff;
    position: absolute;
    bottom: 7.5vh;
    display: flex;
    justify-content: center;
    .tubiao{
      height: 100%;
      width: 16vw;
      background-color: #f0d3a7;
      border-radius: 50px;
      font-weight: 700;
      font-size: 38px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #880429;
      letter-spacing:10px;
      cursor: pointer;
    }
  }
}
</style>
